<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
	<ui:define name="head">
		<style>
a:visited, a:hover {
	color: red;
}

.box-header {
	font-size: 18px;
}

.box-footer {
	border-top: none;
}

.col-sm-4 {
	padding: 10px;
}

#timeList {
	list-style: none;
}

#timeList li {
	height: 30px;
	line-height: 30px;
	font-size: 16px;
}

#timeList li span {
	color: blue;
	font-size: 18px;
}

#chartDiv .box-header {
	font-size: 16px;
}
.chart{
height:200px;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div class="row">
			<div class="col-md-3 full-content" style="padding-right: 10px;">
				<div class="box box-success">
					<div class="box-header with-border">
						<!-- <div class="box-tools pull-left">
							<p:growl id="msg" showDetail="true"></p:growl>
							<h:form id="form1">
								<p:autoComplete placeholder="输入拼音首字母可查询" id="in_station"
									value="#{breakerWaveProcessController.filterStation}"
									completeMethod="#{breakerWaveProcessController.completeStations}"
									scrollHeight="400" dropdown="true">
									<p:ajax update="in_station form2:tree" event="itemSelect"
										listener="#{breakerWaveProcessController.autoCompleteStation}" />
								</p:autoComplete>
								<p:commandButton icon="fa fa-refresh" style="margin-left: 3px;"
									update="form2:tree form1"
									actionListener="#{breakerWaveProcessController.refresh()}"></p:commandButton>
							</h:form>
						</div> -->
						厂站列表
					</div>
					<div class="box-body full-content-scroll with-border">
						<h:form id="form2">
							<p:tree value="#{breakerWaveProcessController.root}"
								style="width:400px;border:none" selectionMode="single"
								var="node" dynamic="true" id="tree" widgetVar="tree"
								animate="true">
								<p:ajax event="expand" update="tree"
									listener="#{breakerWaveProcessController.onNodeExpand}" />
								<p:ajax event="select" process="@this"
									update="form2:chartData form2:currentNodeType"
									listener="#{breakerWaveProcessController.onNodeSelect}"
									oncomplete="genWave()" />

								<p:treeNode type="nwzd" icon="fa fa-home">
									<h:outputText value="#{node}" />
								</p:treeNode>
								<p:treeNode type="station" icon="fa  fa-home">
									<h:outputText value="#{node}" />
								</p:treeNode>
								<p:treeNode type="breaker" icon="fa fa-folder-open-o">
									<h:outputText value="#{node}" />
								</p:treeNode>
								<p:treeNode type="phase" icon="fa fa-folder-open-o">
									<h:outputText value="#{node}" />
								</p:treeNode>
								<p:treeNode type="faultDate" icon="fa fa-calendar-times-o">
									<h:outputText value="#{node}" />
								</p:treeNode>
							</p:tree>
							<h:inputHidden id="chartData"
								value="#{breakerWaveProcessController.chartData}"></h:inputHidden>
							<h:inputHidden id="currentNodeType"
								value="#{breakerWaveProcessController.currentNodeType}"></h:inputHidden>
						</h:form>
					</div>
					<div class="box-footer"></div>
				</div>
			</div>
			<div class="col-sm-9" style="padding-left: 10px;">
				<div class="box box-success">
					<div class="box-header with-border">断路器动作过程</div>
					<div class="box-body full-content-scroll">
						<div id="chartDiv">
							<div class="row">
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											线路保护发信——断路器操作箱
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool" >
													<i class="fa fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart1" style="width:100%" ></div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											线路保护发信——断路器保护发信
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool">
													<i class="fa  fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart2" style="width:100%"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											断路器操作箱——合闸位置信息
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool">
													<i class="fa  fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart3" style="width:100%"></div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											断路器操作箱——分闸位置信息
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool">
													<i class="fa  fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart4" style="width:100%"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											断路器重合闸发信——合闸位置信息
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool">
													<i class="fa  fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart5" style="width:100%"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-4">
									<div class="box box-warning">
										<div class="box-header with-border">
											断路器重合闸发信——分闸位置信息
											<div class="box-tools pull-right">
												<button type="button" class="btn btn-box-tool">
													<i class="fa  fa-square-o" onclick='getMaxBox(this)'></i>
												</button>
											</div>
										</div>
										<div class="box-body">
											<div class="chart" id="chart6" style="width:100%"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="faultDiv" style="display: none">
							<ul id="timeList">
							</ul>
						</div>
					</div>
					<div class="box-footer"></div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script
			src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script
			src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="breakerWaveProcess.js"></script>
	</ui:define>
</ui:composition>